<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:jsf="http://xmlns.jcp.org/jsf">
    <head jsf:id="head">     
        <title>Public Home</title>
        <link href="css/meteocal.css" rel="stylesheet" type="text/css"/>
    </head>
    <body jsf:id="body" class="noFrame">   
        <!--Element of the first line on the top bar-->
        <div id="topHeader">
             <img id="logo" src="Images/meteocalsnow.png"  name="meteocalLogo" title="meteocallogo"/>
             <h1 id="userCalendar">#{SearchController.user.username}'s Calendar</h1>  
              
            <div class="logoutForm">         
                <h:form id="logout">
                    <p:commandButton id="logoutButton" value="Logout" action="#{loginBean.logout()}"/>                     
                </h:form>
            </div>
        </div>
        
        <div id="topHeader">
            <h:form id="search">
                <p:inputText id="searchText" value="#{SearchController.searchedUser}" />
                <p:commandButton id="searchButton" value="Search"  action="#{SearchController.searchUser()}"/>    
            </h:form>
        </div>
        
        <div id="LeftHeader">
            <ul class="buttonList">
                <h:form>
                    <li><p:commandButton class="leftBarButton"  value="Home" action="#{scheduleController.loadOwnCalendar()}"/></li>   
                    <li><p:commandButton class="leftBarButton"  value="AddEvent" action="#{EventController.newEvent}"/></li>     
                    <li><p:button class="leftBarButton"  value="Notifications" outcome="notifications"/></li>   
                    <li><p:button class="leftBarButton"  value="Settings" outcome="settings"/> </li> 
                </h:form>
            </ul>
        </div>
        <div>   
            <h:panelGrid class="schedule">
                <p:schedule class="schedule" id="calendar" value="#{scheduleController.eventModel}" draggable="false" ignoreTimezone="false" resizable="false"  >
                    <p:ajax event="eventSelect" listener="#{scheduleController.onEventSelect}" update="eventDetails, eventButton" />
                </p:schedule>
            </h:panelGrid>

            <p:dialog widgetVar="event" resizable="false" header="Event Details" > 
                <h:panelGrid id="eventDetails" columns="2">
                    <h:outputLabel for="title" value="Title:" />
                    <h:outputText id="title" value="#{scheduleController.event.title}" />
                    
                    <h:outputLabel for="startingTime" value="Starting:" />
                    <h:outputText id="startingTime" value="#{scheduleController.event.startDate}" />

                    <h:outputLabel for="endingTime" value="Ending:" /> 
                    <h:outputText id="endingTime" value="#{scheduleController.event.endDate}" />
          
                </h:panelGrid>
                <br/>
                <br/>
                <br/>
                <p:button id="eventButton" value="Go To Event" onclick="#{scheduleController.showEvent()}" outcome="showEvent"/>   
            </p:dialog>

        </div>

    </body>
</html>
